<template>
  <div
    class="list-load"
    ref="tabList"
    :style="{width: width, height: height, overflowY: scrollY}"
    @scroll="scrollChange($event)"
  >
    <slot></slot>
    <div class="list-load-loading" v-show="finished">
      <span class="list-load-loading-text">{{finishedText}}</span>
    </div>
    <div class="list-load-loading" v-show="loading">
      <img class="list-load-loading-img"
           src="">
      <span class="list-load-loading-text">{{loadingText}}</span>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'list-load',
    props: {
      width: { // 宽
        type: String,
        required: true
      },
      height: { // 高
        type: String,
        required: true
      },
      scrollY: { // overflow-y 是否允许滚动
        type: String,
        default: 'auto'
      },

      /*
      * 加载功能模仿 vant-ui 的 list 组件
      * */
      offset: { // 	滚动条与底部距离小于 offset 时触发load事件
        type: Number,
        default: 300
      },
      immediateCheck: { // 是否在初始化时立即执行滚动位置检查
        type: Boolean,
        default: true,
      },
      loading: { // 是否处于加载状态，加载过程中不触发load事件
        type: Boolean,
        default: false,
        required: true
      },
      finished: { // 是否已加载完成，加载完成后不再触发load事件
        type: Boolean,
        default: false
      },
      loadingText: { // 加载过程中的提示文案
        type: String,
        default: '加载中...'
      },
      finishedText: { // 加载完成后的提示文案
        type: String,
        default: '没有更多了'
      }
    },
    model: {
      prop: 'loading',
      event: 'changeLoading'
    },
    data() {
      return {
        num_height: Number(this.height.replace('px', '')),
      }
    },
    watch: {
      loading: function (val, old) {
        // console.log('loading', val, old);
        setTimeout(() => {
          this.check(this.$refs.tabList)
        }, 1000)
      },
      finished: function (val, old) {
        // console.log('finished', val);
        setTimeout(() => {
          this.check(this.$refs.tabList)
        }, 1000)
      }
    },
    mounted() {
      if (this.immediateCheck) {
        // console.log(this.immediateCheck);
        // console.log(111111);
        this.$nextTick(this.check(this.$refs.tabList))
      }
    },
    methods: {
      scrollChange(ev) {
        if (!this.finished) {
          this.check(ev.target)
        }
      },

      check(ele) {
        // console.log(1, ele.scrollHeight, ele.scrollTop, this.num_height);
        if (this.loading || this.finished) {
          return
        }

        if (ele.scrollHeight - ele.scrollTop - this.num_height < this.offset) {
          this.$emit('changeLoading', true)
          this.$emit('load') // 触发load事件
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .list-load {
    overflow-x: hidden;
    .list-load-loading {
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      .list-load-loading-img {
        width: 16px;
        height: 16px;
        margin-right: 5px;
      }
      .list-load-loading-text {
        font-size: 14px;
        line-height: 20px;
        color: #888;
      }
    }
  }
</style>
